<template>
  <div class="dom-item">
    <el-input v-show="!preview" type="textarea" @input="strChange()" :rows="2" placeholder="请输入内容" v-model="strData">
    </el-input>
    <p v-show="preview" class="title" v-html="domRender(strData)"></p>
    <button class="dom-btn" @click="preview = !preview"> {{preview?'编辑':'预览'}}</button>
    <add-form ref="addModel" @paramsSet="paramsSet"></add-form>
  </div>
</template>
<script>
  import addForm from '@/views/page/dom/addForm'
  export default {
    components: {
      addForm
    },
    props: {
      str: {
        type: Object,
        required: false,
        default: () => {
          return {
            index: 999,
            data: ""
          }
        }
      },
      config: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    computed: {
      strData: {
        get() {
          if (this.currData) {
            return this.currData
          } else {
            return this.str.data
          }
        },
        set(value) {
          this.currData = value
        }
      }
    },
    data() {
      return {
        preview: false,
        currData: '',
        oldStrData: []
      }
    },
    methods: {
      strChange() {
        this.$emit('strChange', {
          tag: this.str.index,
          data: this.currData
        })
      },

      domRender(str) {
        let strData = str
        var reg = /\{.*?\}/g
        let result = str.match(reg)
        if (!result) {
          return strData
        }
        let cha = this.oldStrData.filter(function (v) { return result.indexOf(v) == -1 })
        cha.forEach(element => {
          this.$emit('setConfig', {
            type: 'reduce',
            params: element.slice(1, -1),
          })
        });
        for (let i = 0; i < result.length; i++) {
          let a = result[i]
          if (a == '{}') {
            continue
          }
          let r = str.match(a)[0]
          let id = r.slice(1, -1)
          if (this.oldStrData.indexOf(r) < 0) {
            this.oldStrData.push(r)
            this.$emit('setConfig', {
              type: 'add',
              params: id,
              data: {
                data: '',
                unit: '',
              }
            })
          }
          strData = strData.replace(r, '<input idData=' + id + ' class="emptyOut" type="text" /><span class="set-btn" idData=' + id + '>[设置]</span>');
        }
        this.bindHtml()
        return strData
      },

      bindHtml() {
        const elements = document.getElementsByClassName("emptyOut");
        for (let i = 0; i < elements.length; i++) {
          const item = elements[i]
          item.value = this.config[item.attributes.idData.value] ? this.config[item.attributes.idData.value].data : ''
          //事件动态绑定
          item.onblur = this.aa;
        }
        const elementBtns = document.getElementsByClassName("set-btn");
        for (let i = 0; i < elementBtns.length; i++) {
          const item = elementBtns[i]
          //事件动态绑定
          item.onclick = this.tan;
        }
      },

      tan(event) {
        let type = event.target.attributes.idData.value
        this.$refs.addModel.init(type, this.config[type])
      },

      aa(event) {
        this.$emit('configValue', {
          type: event.target.attributes.idData.value,
          value: event.target.value
        })
      },

      paramsSet(obj) {
        this.$emit('paramsSet', obj)
      },

    },
  }
</script>
<style scoped>
  .dom-item {
    position: relative;
    width: 600px;
    padding: 10px;
    min-height: 54px;
  }

  div /deep/.el-textarea__inner {
    width: calc(100% - 30px);
  }

  .dom-btn {
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 10px;
    width: 30px;
    font-size: 12px;
    display: inline-block;
    cursor: pointer;
    background-color: #409eff;
    border: none;
    color: #fff;
  }

  .dom-btn:hover {
    background-color: #79bbff;
  }
</style>